<template>
	<div class="gps-menu" v-show="this.$store.state.user.visibles.deviceMenu">
		<el-collapse v-model="activeName" >
			  <el-collapse-item title="设备列表" name="1">
					<template slot="title">
						 &nbsp;&nbsp;&nbsp;&nbsp;  {{$t("map.menuDeviceList")}}
						 <div class="online-state">
							 <el-tooltip class="item" effect="dark" content="在线" placement="bottom">
								 <span><svg-icon icon-class="luntai" class-name="menu-icon-luntai green-light" /> {{$store.state.user.onlineState.online}}</span>&nbsp;&nbsp;&nbsp;&nbsp;
							 </el-tooltip>
							 <el-tooltip class="item" effect="dark" content="离线" placement="bottom">
									<span><svg-icon icon-class="luntai" class-name="menu-icon-luntai gray-light" /> {{$store.state.user.onlineState.offline}}</span>&nbsp;&nbsp;&nbsp;&nbsp;
							 </el-tooltip>
							 <el-tooltip class="item" effect="dark" content="未激活" placement="bottom">
									 <span><font-awesome-icon icon="question-circle"/> {{$store.state.user.onlineState.notactive}}</span>
							 </el-tooltip>

						</div>
					 </template>
 		 			<div class="title" style="background: #ffffff;height:30px;padding: 0px 10px 0px 114px;">

            <el-button @click="historyRoute" size="mini" type="primary">历史轨迹</el-button>
            <el-button @click="stayRecords" size="mini" type="primary">停留记录</el-button>

 		 			<!--<el-button-group>-->
 		 				<!--<el-tooltip class="item" effect="dark" :content="$t('map.menuDeviceAdd')" placement="top-start">-->
 		 				<!--<el-button type="primary" size="small" icon="el-icon-plus" @click.stop="handleAdd"  :disabled="!hasPermission('user:device:add')"></el-button></el-tooltip>-->
 		 				<!--<el-tooltip class="item" effect="dark" :content="$t('common.edit')" placement="top-start">-->
 		 				<!--<el-button type="primary" size="small" icon="el-icon-edit" @click.stop="handleEdit" :disabled="this.$store.state.user.devices.selectId==0||!hasPermission('user:device:update')"></el-button></el-tooltip>-->
 		 				<!--<el-tooltip class="item" effect="dark" :content="$t('common.delete')" placement="top-start">-->
 		 				<!--<el-button type="primary" size="small" icon="el-icon-delete" @click.stop="deleteConfirm" :disabled="this.$store.state.user.devices.selectId==0||!hasPermission('user:device:delete')"></el-button></el-tooltip>-->
 		 			<!--</el-button-group>-->


 		 			 <!--<el-cascader-->
					  <!--popper-class="menu"-->
					  <!--:disabled="this.$store.state.user.devices.selectId==0"-->
 		 			 	<!--placeholder=""-->
 		 		    <!--expand-trigger="hover"-->
 		 		    <!--:options="optionsMenu"-->
 		 		    <!--@change="handleChangeMenu"-->
 		 				<!--@click.native="loadCommand"-->
 		 				<!--&gt;-->
 		 		  <!--</el-cascader>-->
 		 			 <!--<span class="oper-menu">-->
 		 				<!--<i class="el-icon-menu"></i>-->
 		 					<!--{{$t("map.menuOperation")}}-->
 		 			<!--</span>-->

 		 		</div>

 		 		<el-row >
          <el-col :span="16" :offset="1">
            <el-input
            placeholder="请输入搜索的设备名称"
            v-model="searchDeviceName"
            >
            </el-input>
          </el-col>
          <el-col :offset="1" :span="5">
            <el-button @click="searchDevice" style="width: 100%;" type="primary" icon="el-icon-search"></el-button>
          </el-col>
 		 		</el-row>
          <div style="max-height: 400px; overflow-y: auto">
            <el-tree
              ref="tree"
              :data="$store.state.user.menuTreeData.nodes"
              show-checkbox
              node-key="id"
              :default-expand-all="true"
              :highlight-current='true'
              :props="defaultProps"
              :render-content="renderContent"
              @current-change="currentChange"
              @check-change="handleCheckChange"
              draggable
              @node-drag-start="handleDragStart"
              @node-drag-enter="handleDragEnter"
              @node-drag-leave="handleDragLeave"
              @node-drag-over="handleDragOver"
              @node-drag-end="handleDragEnd"
              @node-drop="handleDrop"
              :allow-drop="allowDrop"
              :default-checked-keys="$store.state.user.menuTreeData.checkedKeys"
            >
            </el-tree>
          </div>

 		 			<el-dialog :title="'['+this.selectDevice.name+'] 绑定围栏'" :visible.sync="bindGeoVisible" width="40%" append-to-body :lock-scroll="false">
 		 				 <Binds :visible="bindGeoVisible" :by="by"></Binds>
 		 		 </el-dialog>

 		 		 <el-dialog title="命令下发" :visible.sync="$store.state.user.visibles.commandDialog" width="50%" :lock-scroll="false">
					 <CommandView :id="commandId" :device="selectDevice" :visible="$store.state.user.visibles.commandDialog"></CommandView>
 		 		 </el-dialog>

				 <el-dialog title="命令记录" :visible.sync="recordsVisible" width="80%" :lock-scroll="false">
					 	<Records :device="selectDevice" :visible="recordsVisible"></Records>
 		 		 </el-dialog>

				 <el-dialog title="多媒体" :visible.sync="mediaVisible" width="60%" append-to-body :lock-scroll="false">
						<Medias :device="selectDevice" :visible="mediaVisible"></Medias>
				</el-dialog>

				<el-dialog :title="selectDevice.name+' 停留记录'" :visible.sync="stopVisible" width="80%" :lock-scroll="false">
					 <Stop :device="selectDevice" :visible="stopVisible"></Stop>
				</el-dialog>

 		 			<DeviceBox></DeviceBox>
			  </el-collapse-item>

		</el-collapse>

	</div>
</template>

<script>
import '@/styles/gps-menu.scss';
import util from '@/utils/util'
import DeviceBox from './Device'; //设备新增
import Binds from '../common/Binds'; //绑定围栏
import CommandView from '../command/CommandView'; //命令下发发送界面
import Records from '../command/Records';
import Medias from '../media/index';
import Stop from '../statistics/Stop';
import { delDevice,updateDevice,deleteGroup,moveGroup } from '@/api/api';
import moment from 'moment';
import { mapActions } from 'vuex'
export default {
  name: 'deviceMenu',
  props: ['selectDeviceId'],
  data() {
    return {
      searchDeviceName: '',
      activeName: '1',
      selectDevice:{},//选中的列表中的设备,
      optionsMenu: [{
       value: 'history',
       label: this.$t('map.menuOperHistory'),
     },{
       value: 'geofence',
       label: this.$t('map.menuOperGeofence'),
     },{
       value: 'statistics',
       label: this.$t('map.menuOperStatistics'),
       children: [
      // 	 {
      // 	 value: 'mileage',
      // 	 label: '里程统计',
      // 	 disabled: true,
      //  }, {
      // 	 value: 'speed',
      // 	 label: '速度曲线',
      // 	 disabled: true,
      //  },
      {
         value: 'statisticsStop',
         label: '停留记录',
         disabled: false,
       }
     ]
     }, {
       value: 'command',
       label: this.$t('map.menuOperCommand'),
       children: []
     },{
       value: 'media',
       label: this.$t('map.menuOperMedia'),
     } ],
     bindGeoVisible:false,
    by:1,
    devicesList:[],
    commandVisible:false,
    recordsVisible:false,
    mediaVisible:false,
    stopVisible:false,
    commandId:0,
    defaultProps: {
        children: 'children',
        label: 'name'
      }
   }

  },


  methods: {
    searchDevice () {
      this.MAP_SEARCH({
        keywords: this.searchDeviceName
      })
    },
    stayRecords () {
      this.stopVisible=true
    },
    historyRoute () {
      //切换地图模式为轨迹回放
      this.$store.dispatch('setMapValues',[{key:'mode',value:2}]);
    },
    loadCommand(){
      this.optionsMenu[3].children=[];
      var cmdIds = this.$store.state.user.dict.cmdIdsByType[this.selectDevice.typeId];
        var cmdViews = this.$store.state.user.dict.commandViews;
          if(cmdIds){
            cmdIds.forEach(cmdId => {
               this.optionsMenu[3].children.push({
                    value: cmdId,
                    label: cmdViews[cmdId].name
                })

            });
            this.optionsMenu[3].children.push({
                 value: 0,
                 label: '[命令记录]'
             })
          }
    },
    handleAdd: function() {
      this.$store.dispatch('setVisblesFlag', [{key:'deviceAddForm',value:true}]);
    },
    deleteConfirm(){

        if(!this.$store.state.user.devices.selectId){
          this.$message({
            message: '请先选择设备',
            type:  'error'
          });
          return ;
        }
        this.$confirm('你确定要删除该设备吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
          lockScroll:false
        }).then(() => {
            delDevice(this.$store.state.user.devices.selectId).then((res) => {
               this.$store.dispatch('INIT_DEVICES_DATA'); //初始化设备数据
          });
        }).catch(() => {});
    },
    handleEdit: function () {
      if(this.$store.state.user.devices.selectId!=0){
        this.$store.dispatch('setVisblesFlag', [{key:'deviceEditForm',value:true}]);
      }else{
        this.$message({
          message: '请先选择设备',
          type:  'error'
        });
      }
    },
    handleChangeMenu(menu){
      if(this.$store.state.user.devices.selectId==0){
        this.$message({
          message: '请先选择设备',
          type: 'error'
        });
        return;
      }
      switch (menu[0]){
        case 'history':
          //切换地图模式为轨迹回放
          this.$store.dispatch('setMapValues',[{key:'mode',value:2}]);
          break;
        case 'geofence':
          this.by=1
          this.bindGeoVisible=true
          break;
        case 'command':
          this.commandId = menu[1];
          if(this.commandId!=0){
            //this.commandVisible = true
            this.$store.dispatch('setVisblesFlag', [{key:'commandDialog',value:true}]);
          }else{
            this.recordsVisible = true;
          }
          break;
          case 'media':
            this.mediaVisible = true;
            break;
          case 'statistics':
              if(menu[1]=='statisticsStop'){
                this.stopVisible=true;
              }
            break;
        }

    },
    renderContent(h, { node, data, store }) {
     var dom;
        switch(data.type){
            case 'group':
                dom = (<span><svg-icon icon-class="group" class-name="menu-icon-question blue" /> {node.label}</span>);
                break;
            case 'device':
                var status = this.$store.state.user.devices.list[this.$store.state.user.devices.index[data.id]].status;
                var motion = this.$store.state.user.devices.list[this.$store.state.user.devices.index[data.id]].motion;
                if(status==1){//在线
                  if(motion==1){
                    dom = (<span><svg-icon icon-class="luntai" class-name="menu-icon-luntai green icon_spin" />{node.label}</span>)
                  }else{
                    dom = (<span><svg-icon icon-class="luntai" class-name="menu-icon-luntai green" />{node.label}</span>)
                  }

                }else if(status==0){
                   dom = (<span><svg-icon icon-class="luntai" class-name="menu-icon-luntai" />{node.label}</span>)
                }else{
                   dom = (<span><svg-icon icon-class="question" class-name="menu-icon-question" />{node.label}</span>)
                }
            break;
        }
     return  dom;
    },
    currentChange(node){
      console.log(node)
      if(node.type==='device'){
        let device = this.$store.state.user.devices.list[this.$store.state.user.devices.index[node.id]];
        this.selectDevice = device;
        this.$store.dispatch('setSelectDeviceId', node.id);

        if(device.lastUpdate){
           this.$store.dispatch('setMapValues',[{key:'mode',value:1}]);
        }else{
          this.$message({
            message: '未激活',
            type: 'error'
          });
        }
      }
    },
    handleCheckChange(data, checked, indeterminate){//节点勾选
       if(data.type==='device'){
         this.$store.dispatch('setMarkersVisible', {key:this.$store.state.user.devices.index[data.id],value:checked});
       }
     },
    filterNode(value, data) {
      if (!value) return true;
      return data.name.indexOf(value) !== -1;
    },
    handleDragStart(node, ev) {
      // console.log('drag start', node);
    },
    handleDragEnter(draggingNode, dropNode, ev) {
     //console.log('tree drag enter: ', dropNode.label);
    },
    handleDragLeave(draggingNode, dropNode, ev) {
      // console.log('tree drag leave: ', dropNode.label);
    },
    handleDragOver(draggingNode, dropNode, ev) {
     //console.log('tree drag over: ', dropNode.label);
    },
    handleDragEnd(draggingNode, dropNode, dropType, ev) {
    // console.log('tree drag end: ', dropNode && dropNode.label, dropType);

    },
    handleDrop(draggingNode, dropNode, dropType, ev) {
      var targetNode = {}
      if(dropType=='inner'){
       targetNode = dropNode.data;
      }else{
       targetNode = this.findP(this.$store.state.user.menuTreeData.nodes,dropNode.data);
      }

      let param = {type:draggingNode.data.type,id:draggingNode.data.id,groupId:targetNode.id}
       moveGroup(param).then((res) => {
         this.$message({
           message: '移动成功！',
           type: 'success'
         });
      });
    },
    allowDrop(draggingNode, dropNode) {
      return dropNode.data.type !== 'device';
    },
    //找父节点
    findP(zNodes,node) {
      for(var i=0;i<zNodes.length;i++){
          if(node.parentId==0){
            return {id:0,name:'root'};
          }else  if(node.parentId==zNodes[i].id){
             return zNodes[i];
          }

      }
    },
    ...mapActions([
      'MAP_SEARCH'
    ])
  },

  components: {
    DeviceBox,
    "Binds":Binds,
    "CommandView":CommandView,
    Records,
    Medias,
    Stop
  },
  mounted() {

  },
   watch: {
     '$store.state.user.devices.selectId':function(){
        this.$refs.tree.setCurrentKey(this.$store.state.user.devices.selectId);
     }

  }
}
</script>
<style>
.oper-menu{
		float: right;
    position: absolute;
    right: 53px;
    top: 47px;
    color: #fff;
		pointer-events: none;
		font-size: 13px;
}

.el-cascader__label{
	display: none;
}
.el-cascader .el-input__inner{
	border-color: #409EFF;
	border-radius: 3px;
	    height: 32px;
	background-color: #409EFF;
}
.online-state{
		float:right;
		margin-right: 20px;
	}
	.icon_spin {
		  -moz-animation: spin 2s infinite linear;
		  -o-animation: spin 2s infinite linear;
		  -webkit-animation: spin 2s infinite linear;
		  animation: spin 2s infinite linear;
		  -webkit-transform-origin:50% 49% 0px;
		}
		@-moz-keyframes spin {
		  0% { -moz-transform: rotate(0deg); }
		  100% { -moz-transform: rotate(360deg); }
		}
		@-webkit-keyframes spin {
		  0% { -webkit-transform: rotate(0deg); }
		  100% { -webkit-transform: rotate(360deg); }
		}
		@-o-keyframes spin {
		  0% { -o-transform: rotate(0deg); }
		  100% { -o-transform: rotate(360deg); }
		}
		@-ms-keyframes spin {
		  0% { -ms-transform: rotate(0deg); }
		  100% { -ms-transform: rotate(360deg); }
		}
		@keyframes spin {
		  0% { transform: rotate(0deg); }
		  100% { transform: rotate(360deg); }
		}
		.menu-icon-luntai {
      font-size: 16px;
			height: 28px;margin-left: 2px;
    }
		.menu-icon-question {
      font-size: 14px;
			height: 28px;margin-left: 2px;
    }

</style>
